<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="'/home'">首页</el-breadcrumb-item>
    <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="flex gap-2">
    <el-tag v-for="tag in list" :key="tag" closable type="primary">
      {{ tag }}
    </el-tag>
  </div>
</template>

<script setup >
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.path);
const list = ref([]);
watch(route, () => {
  if (list.value.indexOf(route.meta.title) == -1) {
    list.value.push(route.meta.title);
  } else {
    console.log("无法添加");
  }

  console.log(list.value);
});
</script>
<style scoped lang="less">
.el-breadcrumb{
    padding-top: 20px;
    padding-bottom: 10px;
}
</style>